<!--
 * @Author: H.
 * @Date: 2021-10-26 14:06:42
 * @LastEditTime: 2021-11-24 16:31:20
 * @Description: 
-->
<template>
  <div>
    <h1>Table 示例</h1>
    <Demo :component="TableDemo1" />
    <Demo :component="TableDemo2" />
    <Demo :component="TableDemo3" />
    <Demo :component="TableDemo4" />
    <Demo :component="TableDemo5" />
    <Demo :component="TableDemo6" />
    <Demo :component="TableDemo7" />
    <h2>Table Attributes</h2>
    <Table :dataSource="dataSource" :columns="columns" />
  </div>
</template>

<script lang="ts">
import Demo from './Demo/index.vue'
import TableDemo1 from './Demo/TableDemo1.vue'
import TableDemo2 from './Demo/TableDemo2.vue'
import TableDemo3 from './Demo/TableDemo3.vue'
import TableDemo4 from './Demo/TableDemo4.vue'
import TableDemo5 from './Demo/TableDemo5.vue'
import TableDemo6 from './Demo/TableDemo6.vue'
import TableDemo7 from './Demo/TableDemo7.vue'
import Table from '../lib/table/Table.vue'
export default {
  components: {
    Demo,
    Table,
  },
  setup() {
    const dataSource = [
      {
        id: 1,
        params: 'dataSource',
        illustrate: '指定表格的数据源 dataSource 为一个数组。',
        type: 'Array',
        optional: '-',
        defaults: '-',
      },
      {
        id: 2,
        params: 'columns',
        illustrate:
          '指定表格每一列的表头 prop需要与 dataSource 里的属性一一对应 columns 为一个数组。',
        type: 'Array',
        optional: '-',
        defaults: '-',
      },
      {
        id: 3,
        params: 'numberVisible',
        illustrate: '是否展示序号',
        type: 'boolean',
        optional: '-',
        defaults: 'false',
      },
      {
        id: 4,
        params: 'bordered',
        illustrate: '是否带有纵向边框	',
        type: 'boolean',
        optional: '-',
        defaults: 'false',
      },
      {
        id: 5,
        params: 'v-model:selectedItems',
        illustrate: '与checkable一起使用,会返回每一条选中的表格数据',
        type: 'Array',
        optional: '-',
        defaults: '-',
      },
      {
        id: 13,
        params: 'checkable',
        illustrate: '多选表格',
        type: 'boolean',
        optional: '-',
        defaults: 'false',
      },
      {
        id: 6,
        params: 'compact',
        illustrate: '是否启用紧凑型的列表',
        type: 'boolean',
        optional: '-',
        defaults: 'false',
      },
      {
        id: 7,
        params: 'striped',
        illustrate: '斑马纹',
        type: 'boolean',
        optional: '-',
        defaults: 'true',
      },
      {
        id: 8,
        params: 'orderBy',
        illustrate: '将dataSource里需要排序的数据props放入orderBy',
        type: 'object',
        optional: 'asc/desc',
        defaults: '-',
      },
      {
        id: 9,
        params: 'loading',
        illustrate: '表格加载数据时的loading动画',
        type: 'boolean',
        optional: '-',
        defaults: 'false',
      },
      {
        id: 10,
        params: 'height',
        illustrate: '设置表格高度',
        type: 'number',
        optional: '-',
        defaults: '-',
      },
      {
        id: 11,
        params: 'expendProp',
        illustrate: '指定dataSource里其中一条props为展开行',
        type: 'string',
        optional: '-',
        defaults: '-',
      },
    ]
    const columns = [
      { title: '参数', prop: 'params', width: '300' },
      { title: '说明', prop: 'illustrate', width: '300' },
      { title: '类型', prop: 'type', width: '100' },
      { title: '可选值', prop: 'optional', width: '100' },
      { title: '默认值', prop: 'defaults' },
    ]
    return {
      TableDemo1,
      TableDemo2,
      TableDemo3,
      TableDemo4,
      TableDemo5,
      TableDemo6,
      TableDemo7,
      columns,
      dataSource,
    }
  },
}
</script>

<style></style>
